<template>
	<view>
		<view class="login">
		
				<image src="/static/images/loginBg.jpg" class="bg-img"></image>
			
			<view class="login_title" style="background: #fff;width:100px;height:100px;margin: 0 auto;margin-top: 40px;border-radius: 50px;">
				<image src="/static/Logo/logo.png" style="width:80px;height:80px;margin: 10px auto;"></image>
			</view>
			<view :class="'login_user ' + nameFocus">
				<input type="text" :placeholder="usePwdLogin?'请输入用户名':'请输入手机号'"
					placeholder-style="color:rgb(173,185,193)" @input="bindUsername" @focus="onFocusName"
					@blur="onBlurName">
			</view>

			<view :class="'login_pwd ' + psdFocus" v-if="usePwdLogin">
				<input type="text" :password="!showPassword" placeholder="请输入密码"
					placeholder-style="color:rgb(173,185,193)" @input="bindPassword" @focus="onFocusPsd"
					@blur="onBlurPsd">
				<image class="psdIcon" :src="showPassword ? '/static/images/eye.png' : '/static/images/eye-fill.png'"
					@tap="showPassword = !showPassword"></image>
			</view>


			<view class="login_btn">
				<button hover-class="btn_hover" @tap="login">登录</button>
			</view>

			<view class="login_text">
				<navigator url="../register/register" open-type="redirect">账号注册</navigator>

			</view>
		</view>
	</view>
</template>

<script>
	let WebIM = require("../../utils/WebIM")["default"];
	let __test_account__, __test_psword__;
	let disp = require("../../utils/broadcast");
	let runAnimation = true;
	let times = 60;
	let timer
	export default {
		data() {
			return {
				usePwdLogin: true, //是否用户名+手机号方式登录
				name: "",
				psd: "",
				grant_type: "password",
				psdFocus: "",
				nameFocus: "",
				showPassword: false,
				type: 'text',
				btnText: '获取验证码'
			};
		},

		components: {},
		props: {},
		onLoad: function() {
			const me = this;
			const app = getApp().globalData;

			disp.on("em.error.passwordErr", function() {
				uni.showToast({
					title: "用户名或密码错误",
					icon: 'none'
				});
			});
		},
		methods: {
			bindUsername: function(e) {
				this.setData({
					name: e.detail.value
				});
			},
			bindPassword: function(e) {
				console.log(e.detail.value);
				this.setData({
					psd: e.detail.value
				});
			},
			onFocusPsd: function() {
				this.setData({
					psdFocus: 'psdFocus'
				});
			},
			onBlurPsd: function() {
				this.setData({
					psdFocus: ''
				});
			},
			onFocusName: function() {
				this.setData({
					nameFocus: 'nameFocus'
				});
			},
			onBlurName: function() {
				this.setData({
					nameFocus: ''
				});
			},
		
			
			login: function() {
				var _this=this
				
				//! 默认手机号+验证码登录,且该形式只适用于环信uni-Demo，如有相似登录形式，请更改为自有接口！
				WebIM.conn.open({
					user: _this.name,
					pwd: _this.psd,
				})
				var user_obj={
					user: _this.name,
					pwd: _this.psd,
				}
				uni.setStorageSync('myUsername',_this.name)
				uni.setStorageSync('user_obj',user_obj)
			}
		}
	};
</script>
<style>
	@import "./login.css";
</style>